<template>
  <div>
    <!-- 商品分类 -->

    <el-row :gutter="20">
      <!-- 商品分类一 -->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-button
            type="primary"
            style="width:100%;"
            icon="el-icon-plus"
            @click="Goods_One_FormVisible = true"
            >添加一级分类</el-button
          >
          <!-- 隐藏框 -->
          <el-dialog title="添加一级分类" :visible.sync="Goods_One_FormVisible">
            <el-form
              :model="Goods_One_form"
              :rules="rules"
              ref="Goods_One_form"
            >
              <el-form-item label="分类名称" label-width="120px" prop="name">
                <el-input
                  v-model="Goods_One_form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="分类排序" label-width="120px" prop="sort">
                <el-input-number
                  type="date"
                  v-model="Goods_One_form.sort"
                  controls-position="right"
                  @change="Goods_One_Change"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_One_FormVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="Goods_One_submitForm('Goods_One_form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <!--一级分类内容 -->
          <el-table
            :data="Goods_One_tableData"
            tooltip-effect="dark"
            style="width: 100%; margin-top:10px; border: 1px solid #ebeef5; border-radius：5px；"
            @cell-click="Goods_One_change"
            >>
            <el-table-column label="分类名称" prop="name" min-width="50%">
            </el-table-column>
            <el-table-column label="操作" min-width="20%" align="center">
              <template slot-scope="scope">
                <!-- 编辑 -->
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="Goods_One_Edit(scope.$index, scope.row)"
                ></el-button>
                <!-- 删除 -->
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="Goods_One_Delete(scope.$index, scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 点击编辑隐藏框 -->
          <el-dialog
            title="添加一级分类"
            :visible.sync="Goods_One_FormVisible_Compile"
          >
            <el-form
              :model="Goods_One_Compile_form"
              :rules="rules"
              ref="Goods_One_Compile_form"
            >
              <el-form-item label="分类名称" label-width="120px" prop="name">
                <el-input
                  v-model="Goods_One_Compile_form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="分类排序" label-width="120px" prop="sort">
                <el-input-number
                  type="date"
                  v-model="Goods_One_Compile_form.sort"
                  controls-position="right"
                  @change="Goods_One_Change_Compile"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_One_FormVisible_Compile = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="Goods_One_submitForm_Compile('Goods_One_Compile_form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </el-col>

      <!-- 二级分类 -->
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            style="width:100%;"
            icon="el-icon-plus"
            @click="Goods_Two_FormVisible = true"
            >添加二级分类</el-button
          >
          <!-- 隐藏框 -->
          <el-dialog title="添加一级分类" :visible.sync="Goods_Two_FormVisible">
            <el-form
              :model="Goods_Two_form"
              :rules="rules"
              ref="Goods_Two_form"
            >
              <el-form-item label="分类名称" label-width="120px" prop="name">
                <el-input
                  v-model="Goods_Two_form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="上级分类"
                label-width="120px"
                prop="superior"
              >
                <el-select
                  v-model="Goods_Two_form.superior"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="分类排序" label-width="120px" prop="sort">
                <el-input-number
                  type="date"
                  v-model="Goods_Two_form.sort"
                  controls-position="right"
                  @change="Goods_Two_Change"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_Two_FormVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="Goods_Two_submitForm('Goods_Two_form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <!--二级分类内容 -->
          <el-table
            :data="Goods_Two_tableData"
            tooltip-effect="dark"
            style="width: 100%; margin-top:10px; border: 1px solid #ebeef5; border-radius：5px；"
            @cell-click="Goods_Two_change"
            >>
            <el-table-column label="分类名称" prop="name" min-width="50%">
            </el-table-column>
            <el-table-column label="操作" min-width="20%" align="center">
              <template slot-scope="scope">
                <!-- 编辑 -->
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="Goods_Two_Edit(scope.$index, scope.row)"
                ></el-button>
                <!-- 删除 -->
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="Goods_Two_Delete(scope.$index, scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 二级点击编辑隐藏框 -->
          <el-dialog
            title="添加二级分类"
            :visible.sync="Goods_Two_FormVisible_Compile"
          >
            <el-form
              :model="Goods_Two_Compile_form"
              :rules="rules"
              ref="Goods_Two_Compile_form"
            >
              <el-form-item label="分类名称" label-width="120px" prop="name">
                <el-input
                  v-model="Goods_Two_Compile_form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="上级分类"
                label-width="120px"
                prop="superior"
              >
                <el-select
                  v-model="Goods_Two_Compile_form.superior"
                  placeholder="请选择上级分类"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="分类排序" label-width="120px" prop="sort">
                <el-input-number
                  type="date"
                  v-model="Goods_Two_Compile_form.sort"
                  controls-position="right"
                  @change="Goods_Two_Change_Compile"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_Two_FormVisible_Compile = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="Goods_Two_submitForm_Compile('Goods_Two_Compile_form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </el-col>

      <!-- 三级分类 -->
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            style="width:100%;"
            icon="el-icon-plus"
            @click="Goods_Three_FormVisible = true"
            >添加三级分类</el-button
          >
          <!-- 隐藏框 -->
          <el-dialog
            title="添加三级级分类"
            :visible.sync="Goods_Three_FormVisible"
          >
            <el-form
              :model="Goods_Two_form"
              :rules="rules"
              ref="Goods_Three_form"
            >
              <el-form-item label="分类名称" label-width="120px" prop="name">
                <el-input
                  v-model="Goods_Three_form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="上级分类"
                label-width="120px"
                prop="superior"
              >
                <el-select
                  v-model="Goods_Three_form.superior"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="分类排序" label-width="120px" prop="sort">
                <el-input-number
                  type="date"
                  v-model="Goods_Three_form.sort"
                  controls-position="right"
                  @change="Goods_Three_Change"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_Three_FormVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="Goods_Three_submitForm('Goods_Three_form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <!--三级分类内容 -->
          <el-table
            :data="Goods_Three_tableData"
            tooltip-effect="dark"
            style="width: 100%; margin-top:10px; border: 1px solid #ebeef5; border-radius：5px；"
            @cell-click="Goods_Three_change"
            >>
            <el-table-column label="分类名称" prop="name" min-width="40%">
            </el-table-column>
            <el-table-column label="操作" min-width="50%" align="center">
              <template slot-scope="scope">
                <!-- 编辑 -->
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="Goods_Three_Edit(scope.$index, scope.row)"
                ></el-button>
                <!-- 删除 -->
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="Goods_Three_Delete(scope.$index, scope.row)"
                ></el-button>
                <!-- 关联按钮 -->
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-link"
                  circle
                  @click="Goods_Three_Relevance(scope.$index, scope.row)"
                ></el-button>
                <!-- 已关联按钮 -->
                <el-button
                  type="success"
                  size="mini"
                  icon="el-icon-view"
                  circle
                  @click="Goods_Three_Processed(scope.$index, scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 三级点击编辑隐藏框 -->
          <el-dialog
            title="添加三级分类"
            :visible.sync="Goods_Three_FormVisible_Compile"
          >
            <el-form
              :model="Goods_Three_Compile_form"
              :rules="rules"
              ref="Goods_Three_Compile_form"
            >
              <el-form-item label="分类名称" label-width="120px" prop="name">
                <el-input
                  v-model="Goods_Three_Compile_form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="上级分类"
                label-width="120px"
                prop="superior"
              >
                <el-select
                  v-model="Goods_Three_Compile_form.superior"
                  placeholder="请选择上级分类"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="分类排序" label-width="120px" prop="sort">
                <el-input-number
                  type="date"
                  v-model="Goods_Three_Compile_form.sort"
                  controls-position="right"
                  @change="Goods_Three_Change_Compile"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_Three_FormVisible_Compile = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  Goods_Three_submitForm_Compile('Goods_Three_Compile_form')
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <!-- 三级选择关联商品隐藏框 -->
          <el-dialog
            title="选择关联商品"
            :visible.sync="Goods_Three_Relevance_FormVisible"
          >
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-input
                    v-model="Goods_Product"
                    placeholder="商品名称"
                  ></el-input></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-input
                    v-model="Goods_Serial"
                    placeholder="商品编号"
                  ></el-input></div
              ></el-col>
              <el-col :span="4"
                ><div class="grid-content bg-purple">
                  <el-button type="primary" icon="el-icon-search"
                    >搜索</el-button
                  >
                </div></el-col
              >
            </el-row>

            <el-table
              ref="Goods_Three_Relevance_Table"
              :data="Goods_Three_Relevance_tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="Goods_Three_Relevance_SelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="商品图片" width="120">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.url"
                    fit="name"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品编号" width="120">
              </el-table-column>
              <el-table-column
                prop="address"
                label="商品名称"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="Goods_Three_Relevance_SizeChange"
              @current-change="Goods_Three_Relevance_CurrentChange"
              :current-page="Goods_Three_Relevance_currentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="20"
            >
            </el-pagination>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_Three_Relevance_FormVisible = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="Goods_Three_Relevance_Save"
                >保存</el-button
              >
            </div>
          </el-dialog>

          <!-- 三级选择已经关联商品隐藏框 -->
          <el-dialog
            title="已关联商品"
            :visible.sync="Goods_Three_Relevance_FormVisible_Already"
          >
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-input
                    v-model="Goods_Product_Already"
                    placeholder="商品名称"
                  ></el-input></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-input
                    v-model="Goods_Serial_Already"
                    placeholder="商品编号"
                  ></el-input></div
              ></el-col>
              <el-col :span="4"
                ><div class="grid-content bg-purple">
                  <el-button type="primary" icon="el-icon-search"
                    >搜索</el-button
                  >
                </div></el-col
              >
            </el-row>

            <el-table
              ref="Goods_Three_Relevance_Table_Already"
              :data="Goods_Three_Relevance_Table_Already"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column label="商品图片" width="120">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.url"
                    fit="name"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品编号" width="120">
              </el-table-column>
              <el-table-column
                prop="address"
                label="商品名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="是否关联" width="120">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.date"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="Goods_Three_Relevance_SizeChange__Already"
              @current-change="Goods_Three_Relevance_CurrentChange__Already"
              :current-page="Goods_Three_Relevance_currentPage__Already"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="20"
            >
            </el-pagination>
            <div slot="footer" class="dialog-footer">
              <el-button @click="Goods_Three_Relevance_FormVisible = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="Goods_Three_Relevance_Save__Already"
                >保存</el-button
              >
            </div>
          </el-dialog>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      // 商品一隐藏按钮
      Goods_One_FormVisible: false,
      // 商品一表单
      Goods_One_form: {
        name: "",
        sort: "",
      },
      // 分类验证
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        sort: [
          {
            type: "date",
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        superior: [
          { required: true, message: "请选择上级分类", trigger: "change" },
        ],
      },
      // 一级分类数据
      Goods_One_tableData: [
        {
          name: "王小虎",
        },
        {
          name: "王小虎",
        },
      ],
      // 点击编辑隐藏框
      Goods_One_FormVisible_Compile: false,
      // 商品一编辑表单
      Goods_One_Compile_form: {
        name: "",
        sort: "",
      },

      // 二级分类隐藏按钮
      Goods_Two_FormVisible: false,
      // 二级商品表单
      Goods_Two_form: {
        name: "",
        sort: "",
        superior: "",
      },

      // 二级分类数据
      Goods_Two_tableData: [
        {
          name: "王小虎",
        },
        {
          name: "王小虎",
        },
      ],
      // 二级点击编辑隐藏框
      Goods_Two_FormVisible_Compile: false,
      // 二级商品编辑表单
      Goods_Two_Compile_form: {
        name: "",
        sort: "",
        superior: "",
      },

      // 三级分类隐藏按钮
      Goods_Three_FormVisible: false,
      // 二级商品表单
      Goods_Three_form: {
        name: "",
        sort: "",
        superior: "",
      },
      // 三级分类的数据
      Goods_Three_tableData: [
        {
          name: "王小虎",
        },
        {
          name: "王小虎",
        },
      ],
      // 三级点击编辑隐藏框
      Goods_Three_FormVisible_Compile: false,
      // 三级商品编辑表单
      Goods_Three_Compile_form: {
        name: "",
        sort: "",
        superior: "",
      },

      // 三级点击关联商品隐藏框
      Goods_Three_Relevance_FormVisible: false,

      // 三级关联商品名称
      Goods_Product: "",
      // 三级经关联商品编号
      Goods_Serial: "",
      // 三级关联表单数据
      Goods_Three_Relevance_tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://images.lecshop.cn/20201114/1605325326655.jpg",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://images.lecshop.cn/20201114/1605325326655.jpg",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://images.lecshop.cn/20201114/1605325326655.jpg",
        },
      ],
      // 三级经关联的当前页码数显示
      Goods_Three_Relevance_currentPage: 1,
      // 三级联动勾选框的数据
      OnSelectionChange: "",

      // 三级点击已经关联商品隐藏框
      Goods_Three_Relevance_FormVisible_Already: false,

      // 三级已经关联商品名称
      Goods_Product_Already: "",
      // 三级已经关联商品编号
      Goods_Serial_Already: "",
      // 三级已经关联表单数据
      Goods_Three_Relevance_Table_Already: [
        {
          date: true,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://images.lecshop.cn/20201114/1605325326655.jpg",
        },
        {
          date: true,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://images.lecshop.cn/20201114/1605325326655.jpg",
        },
        {
          date: true,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://images.lecshop.cn/20201114/1605325326655.jpg",
        },
      ],
      // 三级已经关联当前页码数
      Goods_Three_Relevance_currentPage__Already: 1,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 一级分类排序
    Goods_One_Change(value) {
      console.log(value);
    },
    // 分类一确定按钮
    Goods_One_submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Goods_One_FormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 一级分类编辑
    Goods_One_Edit(index, row) {
      console.log(index, row);
      this.Goods_One_FormVisible_Compile = true;
    },
    // 一级分类删除
    Goods_One_Delete(index, row) {
      console.log(index, row);
    },
    // 一级分类点击触发事件
    Goods_One_change(row, column, cell, event) {
      console.log(row);
    },
    // 点击一级编辑里面的分类
    Goods_One_Change_Compile(value) {
      console.log(value);
    },
    // 点击一级编辑里面的确认
    Goods_One_submitForm_Compile(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Goods_One_FormVisible_Compile = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 二级分类排序
    Goods_Two_Change(val) {},
    // 二级分类确认按钮
    Goods_Two_submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Goods_Two_FormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //二级分类点击触发事件
    Goods_Two_change(row, column, cell, event) {
      console.log(row);
    },
    // 二级编辑点击
    Goods_Two_Edit(index, row) {
      this.Goods_Two_FormVisible_Compile = true;
    },
    // 二级分类删除
    Goods_Two_Delete(index, row) {
      console.log(index, row);
    },
    // 二级编辑里面的分类
    Goods_Two_Change_Compile(value) {
      console.log(value);
    },
    // 二级编辑里面的确认按钮
    Goods_Two_submitForm_Compile(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Goods_Two_FormVisible_Compile = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 三级分类排序
    Goods_Three_Change(val) {},
    // 三级分类确认按钮
    Goods_Three_submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Goods_Three_FormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 三级分类点击触发事件
    Goods_Three_change(row, column, cell, event) {
      console.log(row);
    },
    // 三级编辑点击
    Goods_Three_Edit(index, row) {
      this.Goods_Three_FormVisible_Compile = true;
    },
    // 三级分类删除
    Goods_Three_Delete(index, row) {
      console.log(index, row);
    },
    // 三级编辑里面的分类
    Goods_Three_Change_Compile(value) {
      console.log(value);
    },
    // 三级编辑里面的确认按钮
    Goods_Three_submitForm_Compile(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Goods_Three_FormVisible_Compile = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 三级关联按钮
    Goods_Three_Relevance(index, row) {
      this.Goods_Three_Relevance_FormVisible = true;
    },
    // 三级已关联按钮
    Goods_Three_Processed(index, row) {
      this.Goods_Three_Relevance_FormVisible_Already = true;
    },
    // 三级关联的表单监听事件
    Goods_Three_Relevance_SelectionChange(val) {
      this.OnSelectionChange = val;
    },
    // 三级关联的分页
    Goods_Three_Relevance_SizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 三级经关联当前页的分页
    Goods_Three_Relevance_CurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 三级点击保存按钮
    Goods_Three_Relevance_Save() {
      if (this.OnSelectionChange.length) {
        console.log(1);
        this.Goods_Three_Relevance_FormVisible = false;
      } else {
        this.$message.error("请选择关联商品！");
      }
    },
    // 三级点击已经关联的分页
    Goods_Three_Relevance_SizeChange__Already(val) {
      console.log(`每页 ${val} 条`);
    },
    // 三级已经关联当前页的分页
    Goods_Three_Relevance_CurrentChange__Already(val) {
      console.log(`当前页: ${val}`);
    },
    // 三级已经关联保存按钮
    Goods_Three_Relevance_Save__Already(){
       this.Goods_Three_Relevance_FormVisible_Already = false;
    }
  },

  watch: {},
};
</script>
<style lang="" scoped></style>
